<template>
    <div>
      <!--      面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
<!--      卡片视图区域-->
      <el-card>
        <el-row>
          <el-col :span="8">
            <el-input placeholder="请输入内容">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
<!--        table表格-->
        <el-table :data="orderList" border stripe>
<!--          索引列-->
          <el-table-column type="index"></el-table-column>
          <el-table-column label="订单编号" prop="order_number"></el-table-column>
          <el-table-column label="订单价格" prop="order_price"></el-table-column>
          <el-table-column label="是否付款" prop="pay_status">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.pay_status==='1'" type="success">已付款</el-tag>
              <el-tag v-else type="danger">未付款</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="是否发货" prop="is_send"></el-table-column>
          <el-table-column label="下单时间" prop="create_time">
            <template slot-scope="scope">
              {{scope.row.create_time|dateFormat}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="showBox"></el-button>
              <el-button type="success" icon="el-icon-location" size="mini" @click="showProgressBox"></el-button>
            </template>
          </el-table-column>
        </el-table>
<!--        底部分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-card>

<!--      修改位置信息的对话框-->
      <el-dialog
        title="修改位置"
        :visible.sync="addressVisible"
        width="50%"
        @close="addressVisibleClosed">
        <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px" >
          <el-form-item label="省市县/区" prop="address1">
            <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="address2">
            <el-input v-model="addressForm.address2"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addressVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>

<!--      显示物流状态信息的对话框-->
      <el-dialog
        title="物流信息"
        :visible.sync="progressVisible"
        width="50%"
        >
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in progressInfo"
            :key="index"
            :timestamp="activity.time">
            {{activity.context}}
          </el-timeline-item>
        </el-timeline>

      </el-dialog>
    </div>
</template>

<script>

  import cityData from './citydata.js'

  export default {
    name: 'order',
    data(){
      return {
        queryInfo:{
          query:'',
          pagenum:1,//当前页码
          pagesize:10//每页显示条数
        },
        //存放订单列表数据的数组
        orderList:[],
        total:0,
        //修改位置信息的对话框
        addressVisible:false,
        //位置信息数据对象
        addressForm:{
          address1:[],//联级选择器
          address2:''//具体位置信息
        },
        //验证规则对象
        addressFormRules:{
          address1:[
            { required: true, message: '请选择相应区域', trigger: 'blur' }
          ],
          address2:[
            { required: true, message: '请输入具体位置', trigger: 'blur' }
          ]
        },
        cityData,
        //显示物流信息
        progressVisible:false,
        //物流信息的数据
        progressInfo:[]
      }
    },
    created(){
      this.getOrderList()
    },
    methods:{
      //获取订单列表数据
      async getOrderList(){
        const {data:res} =await this.$http.get('orders',{params:this.queryInfo})
        if(res.meta.status!==200){
          return this.$message.error('获取订单列表失败!')
        }
        console.log(res.data)
        this.total=res.data.total
        this.orderList=res.data.goods
      },
      //每页显示几条数据
      handleSizeChange(newsize){
        this.queryInfo.pagesize=newsize
        this.getOrderList()
      },
      //当前页码改变
      handleCurrentChange(newpage){
        this.queryInfo.pagenum=newpage
        this.getOrderList()
      },
      //点击显示修改位置信息的对话框
      showBox(){
        this.addressVisible=true
      },
      //关闭修改位置信息对话框清空数据
      addressVisibleClosed(){
        this.$refs.addressFormRef.resetFields()
      },
      //点击显示物流信息的对话框
      async showProgressBox(){
        const {data:res} =await this.$http.get('/kuaidi/1106975712662')
        // console.log(res)
        if(res.meta.status!==200){
          return this.$message.error('获取物流信息失败！')
        }
        this.progressInfo=res.data
        this.progressVisible=true
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
